<template>
  <div>
    <!-- 查询 -->
    <div id="input">
      <template>
        <el-select v-model="region" placeholder="搜索方式" style="width: 110px; margin-right: 10px">
          <el-option label="名字" value="名字"></el-option>
          <el-option label="卡号" value="卡号"></el-option>
          <el-option label="日期" value="日期"></el-option>
        </el-select>
        <el-input v-if="region == '卡号'" v-model="text" placeholder="请输入卡号"></el-input>
        <el-input v-if="region == '名字'" v-model="text" placeholder="请输入名字"></el-input>
        <el-input v-if="region == '日期'" v-model="text" placeholder="请输入日期"></el-input>
        <el-row>
          <el-button type="success" round @click="chaxun">查询</el-button>
          <el-button type="success" round @click="chongzhi">重置</el-button>
        </el-row>
      </template>
    </div>

    <!-- 医疗卡表单 -->
    <el-table :data="dangqianyeBill" style="width: 100%">
      <el-table-column prop="cardNo" label="医疗卡号" width="138.5" class="text" align="center"></el-table-column>
      <el-table-column prop="name" label="持卡人姓名" width="138.5" align="center"></el-table-column>
      <el-table-column prop="subjectName" label="科目" width="138.5" align="center"></el-table-column>
      <el-table-column prop="registerMoney" label="挂号费" width="138.5" align="center"></el-table-column>
      <el-table-column prop="checkMoney" label="检查费" width="138.5" align="center"></el-table-column>
      <el-table-column prop="otherMoney" label="其它费" width="138.5" align="center"></el-table-column>
      <el-table-column prop="drugMoney" label="药费" width="138.5" align="center"></el-table-column>
      <el-table-column prop="personCostMoney" label="个人负担数" width="138.5" align="center"></el-table-column>
      <el-table-column prop="totalMoney" label="总金额" width="138.5" align="center"></el-table-column>
    </el-table>
    <!-- 页码 -->
    <div class="pagination">
      <el-pagination @current-change="muDangqianye" layout="prev, pager, next" :page-size="2" :pageCount="maxPgeBill"></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from 'vuex';
import qs from 'qs';
export default {
  data() {
    return {
      text: '',
      subjectNo: '',
      allmoney: '',
      region: '',
    };
  },
  computed: {
    ...mapGetters(['dangqianyeBill', 'maxPgeBill']),
  },
  created() {
    this.getALLB();
  },
  methods: {
    ...mapActions(['getALLBill', 'findBill']),
    ...mapMutations(['muDangqianye']),
    //查询所有代扣账单
    getALLB() {
      this.getALLBill({
        name: 'GET_ALLB',
      });
    },
    //条件查询
    chaxun() {
      let abc = this.text;
      let ran = this.region;
      console.log(ran);
      console.log(qs.stringify({ medicalCarId: '21011001' }));
      // 当后端的请求类型为application/x-www-form-urlencoded时
      // 该接口 需要将数据进行序列转换   通过qs模块  data: qs.stringify({ medicalCarId: abc })
      // medicalCarId=21011001

      if (ran == '卡号') {
        this.findBill({
          name: 'GET_FINDB',
          data: qs.stringify({ medicalCarId: abc }),
        }).then(data => {
          if (data.length > 0) {
            this.$message('查询成功');
          } else {
            this.$message('查询失败');
          }
        });
      }
      if (ran == '名字') {
        this.findBill({
          name: 'GET_FINDB',
          data: qs.stringify({ name: abc }),
        }).then(data => {
          if (data.length > 0) {
            this.$message('查询成功');
          } else {
            this.$message('查询失败');
          }
        });
      }
      if (ran == '日期') {
        this.findBill({
          name: 'GET_FINDB',
          data: qs.stringify({ date: abc }),
        }).then(data => {
          if (data.length > 0) {
            this.$message('查询成功');
          } else {
            this.$message('查询失败');
          }
        });
      }
    },
    //重置
    chongzhi() {
      this.getALLB();
      this.text = '';
    },
  },
};
</script>

<style lang="less" scoped>
.el-input {
  width: 250px;
  margin-right: 20px;
}
#input {
  display: flex;
  // justify-content: center;
  margin-bottom: 20px;
}
.el-pagination {
  text-align: center;
}
.pagination {
  margin-top: 10px;
  float: right;
  width: 100%;
  background: white;
  display: flex;
  justify-content: center;
}
</style>
